<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/scripts/jquery-2.1.4.min.js"></script>

    <style>
        table{
            border: 1px solid #999;
            border-collapse:collapse;
            width: 100%;
        }
        table td{
            border: 1px solid #999;
        }
        table .nav{
            width: 200px;

            vertical-align: top;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
          loadData();

        });
        function loadData() {
      $.post("/listAll.do",function (data) {
         console.info("后台返回的数据",data)
          let  tobody=$("#dataTable tbody")
          for (let i=0;i<data.length;i++){
              let tr=$("<tr></tr>")
              tr.append("<td>"+data[i].pid+"</td>")
              tr.append("<td>"+data[i].pname+"</td>")
              console.info(data[i].pname);
              tr.append("<td>"+data[i].price+"</td>")
              console.info(data[i].pid)
              let td1=$('<td><input type="button" onclick="gai('+data[i].pid+')" value="修改"></td>');
              tr.append(td1);
              let td2=$('<td><input type="button" onclick="shan('+data[i].pid+')" value="删除"></td>');
                tr.append(td2);
              tobody.append(tr);
          }
      })
        }
        function insert() {
         $.post("tosave.do",{},function (data) {
          window.location.href="tosave.do";
         })
        }
        function gai(pid) {
            $.post("/gai1.do",{pid:pid},function (data) {

                console.info("获取的id:"+data.pid)
                window.location.href="toupdate.do?pid="+pid
            })
        }
        function shan(pid) {
            $.post("/delete.do",{pid:pid},function (data) {
            if (data.success==1){
                alert("删除成功")
                window.location.href="tolist.do"
            }else {
                alert("失败")
            }
            window.location.href="/tolist.do"
            })
        }
    </script>
</head>
<body>
<button id="save" onclick="insert()">新增</button>
<table id="dataTable">
<thead>
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>操作</td>
    </tr>
</thead>
    <tbody>
    </tbody>
</table>
</body>
</html>